<template>
	<view>
	<!-- 搜索开始 -->
	<view class="search">
			<navSearch />
	</view>
		<!-- 搜索结束 -->
		<!-- 轮播图开始 -->
		<swiper autoplay circular indicator-dots>
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator>
					<image mode="widthFix" lazy-load :src="item.image_src"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 轮播图结束 -->
		<!-- 导航开始 -->
		<view class="nav">
			<navigator v-for="item in navList" :key="item.name">
				<image :src="item.image_src" mode="widthFix" />
			</navigator>
		</view>
		<!-- 导航结束 -->
		<!-- 楼层开始 -->
		<view class="floor" v-for="(item,index) in floorList" :key="index">
			<view class="titleImage">
				<image :src="item.floor_title.image_src" mode="widthFix"> </image>
			</view>
			<navigator v-for="(item2,index2) in item.product_list" :key="item2.name">
				<image :src="item2.image_src"  />
			</navigator>
		</view>
		<!-- 楼层结束 -->
		<!-- 回到顶部开始 -->
		<view v-show="flag" class="top" @click="backtop">
			<image src="../../static/top.png" mode="widthFix" />
		</view>
		<!-- 回到顶部结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				navList:[],
				floorList:[],
				flag:false
			}
		},
		async onLoad() {
			this.requestAll([this.getSwiper(),this.getNavList(),this.getFloorList()])
		},
		// 页面滚动触发
		onPageScroll(e){
			if(e.scrollTop > 100){
				if(this.flag)return;
				this.flag = true
			}else{
				if(!this.flag)return;
				this.flag = false
			}
		},
		methods: {
			getSwiper(){
				return	this.request({
					url: '/home/swiperdata', 
				}).then(res=>{
					this.swiperList = res
				})
			},
			getNavList(){
				return this.request({
					url: '/home/catitems'
				}).then(res=>{
					console.log(res)
					this.navList = res
				})
			},
			getFloorList(){
				return this.request({
					url: '/home/floordata'
				}).then(res=>{
					console.log(res)
				this.floorList =	res
				})
			},
			// 回到顶部
			backtop(){
				// 回到顶部
				uni.pageScrollTo({
    			scrollTop: 0,
    			duration: 500
				})
			}
		}
	}
</script>

<style lang="scss">
.search{
	width: 100%;
}
	swiper{
		height:340rpx;
	}
	.nav{
		margin:20rpx 0;
		display: flex;
		navigator{
			flex:1;
			image{
				padding:0 20rpx;
			}
		}
	}
.floor{
	// margin:20rpx 0;
	overflow: hidden;
	padding-left:8rpx;
	.titleImage{
		margin-top:20rpx;
	}
	navigator{
		width:33%;
		float: left;
		border: 3rpx solid #fff;
		
		image{
			&:first-child{
				height:412rpx;
			}
		}
		&:nth-last-child(-n+4) {
			height:208rpx;
			image{
				height:100%;
			}
		}
	}
}
.top{
	position: fixed;
	bottom:40rpx;
	right:40rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background:rgba(255,255,255,.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
